<template>
  <div class="contract-detail">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
    </pageHeader>
    <div class="contract-detail-header">
      <div class="contract-detail-header-table">
        <div class="contract-detail-header-table-item">
          <div>{{ form.name }}</div>
        </div>
        <div class="contract-detail-header-table-item"
          ><div
            ><div style="font-size: 48px; color: #ffffff">{{
              form.totalStock
            }}</div
            ><div style="font-size: 24px; color: #ffffff">库存总量 </div></div
          >
        </div>
        <div class="contract-detail-header-table-item">
          <div
            ><div style="font-size: 48px; color: #ffffff">{{
              form.occupiedStock
            }}</div
            ><div style="font-size: 24px; color: #ffffff"
              >已占用库存量
            </div></div
          ></div
        >
        <div class="contract-detail-header-table-item">
          <div
            ><div style="font-size: 48px; color: #ffffff">{{
              form.freeStock
            }}</div
            ><div style="font-size: 24px; color: #ffffff">空闲库存量 </div></div
          ></div
        >
      </div>
    </div>
    <div class="contract-detail-tabs">
      <a-tabs @change="changeTabs" lazy-load>
        <a-tab-pane :key="1" title="库位信息"
          ><LocationTable v-if="tabs === 1"></LocationTable>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- <stateStapsModal
        v-model:visible="isChangeState"
        @changeStepsEmit="changeStepsEmit"
        :state="LocationDetailList.state"
        :state-list="stateList"
      ></stateStapsModal> -->
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, watchEffect, watch, onMounted } from 'vue';
  import { useRoute } from 'vue-router';
  import dayjs from 'dayjs';
  import { getLocationOne } from '@/api/inventory-management/warehouse-management/location-list/index';
  import LocationTable from '../components/location-table/index.vue';

  const route = useRoute();

  const form = ref(JSON.parse(route.query.res as any)); // 合同id

  const title: string = '总览详情';

  const breadCrumb: string[] = ['库存管理', '库存总览', '总览详情'];

  let LocationDetail = ref<any>({}); // 储存客户信息
  let tabs = ref(1);

  const tabData = [
    {
      key: '1',
    },
  ];

  const changeTabs = (e) => {
    tabs.value = e;
  };

  //   const getcontractDetailData = async () => {
  //     try {
  //       // 获取合同详情
  //       const res: any = await getLocationOne({
  //         id,
  //       });
  //       console.log(res);
  //       LocationDetail.value = res;
  //     } catch (err: unknown) {
  //       console.log(err);
  //     }
  //   };
  //   getcontractDetailData();
</script>

<style scoped lang="less">
  .contract-detail {
    &-header {
      padding: 10px 30px;
      height: 312px;
      display: flex;
      &-table {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        &-item {
          width: 23%;
          height: 70%;
          border-radius: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        &-item:nth-child(1) {
          background-color: rgba(117, 176, 254, 1);
          font-size: 48px;
          color: #ffffff;
        }
        &-item:nth-child(2) {
          background-color: rgba(248, 143, 139, 1);
        }
        &-item:nth-child(3) {
          background-color: rgba(245, 182, 69, 1);
        }
        &-item:nth-child(4) {
          background-color: rgba(42, 192, 155, 1);
        }
      }
      &-qrcode {
        width: 30%;
        height: 100%;
        border: 1px solid rgb(165, 165, 165);
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: none;
      }
    }
  }
</style>
